'use client'

import clsx from "clsx";
import Image from "next/image";
import styles from "./Home.module.css"
import Modal from "@/components/ui/Modal/Modal";
import Header from "@/components/ui/Header/Header";
import LoginForm from "@/components/ui/Forms/LoginForm/LoginForm";
import Button from "@/components/ui/Button/Button";
import RegistrationForm from "@/components/ui/Forms/RegistrationForm/RegistrationForm";
import TerminalTicketForm from "@/components/ui/Forms/TerminalTicketForm/TerminalTicketForm";
import {useEffect, useState} from "react";
import {useRouter} from "next/navigation";

export default function Home() {
    const {replace} = useRouter();

    const [modalOpen, setModalOpen] = useState(false);
    const [loginActive, setLoginActive] = useState(false);
    const [currentAuthForm, setCurrentAuthForm] = useState("none");
    const [buyTicketActive, setBuyTicketActive] = useState(false);
    const [buyTicketQr, setBuyTicketQr] = useState(false);
    useEffect(() => {
        if (loginActive && !modalOpen && currentAuthForm === "none") {
            const timeout = setTimeout(() => {
                setLoginActive(false);
            }, 200);
            return () => {
                clearTimeout(timeout);
            };
        }

        if (buyTicketActive && !modalOpen) {
            const timeout = setTimeout(() => {
                setBuyTicketActive(false);
            }, 200);
            return () => {
                clearTimeout(timeout);
            };
        }
    }, [modalOpen]);

    return (
        <>
            <div className={clsx(styles.modal_background, {[styles.setBlur]: modalOpen})}>
                <Header setLoginActive={setLoginActive} setCurrentAuthForm={setCurrentAuthForm}/>
                <div className={styles.main}>
                    <div className={styles.image_container}>
                        <Image
                            className={styles.image}
                            src="/ferry-background.jpg"
                            quality={100}
                            fill={true}
                            alt="Фон паромной переправы"
                            sizes="100vw"
                        />
                    </div>
                    <div className={styles.mainText_container}>
                        <div className={styles.mainText}>
                            <h1 className={styles.title}>Приветствуем на паромной переправе</h1>
                            <p className={styles.subtitle}>
                                Наша переправа поможет вам и вашему транспортному средству
                                безопасно перебраться на один из доступных берегов.
                            </p>
                            <Button
                                type="button"
                                kind="bigButton"
                                content="Купить билет"
                                onClick={() => {
                                    setBuyTicketActive(true);
                                }}
                            />
                        </div>
                    </div>
                </div>
            </div>

            {loginActive && currentAuthForm === "login" && (
                <Modal headText="Вход" modalOpen={modalOpen} setModalOpen={setModalOpen}
                       setCurrentAuthForm={setCurrentAuthForm}>
                    <LoginForm setModalOpen={setModalOpen} setCurrentAuthForm={setCurrentAuthForm}/>
                </Modal>
            )}

            {loginActive && currentAuthForm === "registration" && (
                <Modal headText="Регистрация" modalOpen={modalOpen} setModalOpen={setModalOpen}
                       setCurrentAuthForm={setCurrentAuthForm}>
                    <RegistrationForm setModalOpen={setModalOpen} setCurrentAuthForm={setCurrentAuthForm}/>
                </Modal>
            )}

            {buyTicketActive && (
                <Modal headText={buyTicketQr ? `Сохраните билет любым удобным способом` : 'Заполните данные билета'}
                       modalOpen={modalOpen} setModalOpen={setModalOpen}>
                    <TerminalTicketForm setBuyTicketQr={setBuyTicketQr}/>
                </Modal>
            )}
        </>
    );
}